import React, {Component} from 'react';
import {connect} from 'react-redux';
import {addPerson} from "../../redux/actions/person";

class Person extends Component {
  add = () => {
    const {people} = this.props
    const name = this.inputName.value
    const age = this.inputAge.value
    this.props.addOnePerson({
      id: `${people.length + 1}###`,
      name,
      age
    })
  }

  render() {
    const {people = []} = this.props
    return (
      <div>
        <h2>这里是Person组件</h2>
        <input type="text" placeholder="请输入姓名" ref={c => this.inputName = c}/>
        <input type="text" placeholder="请输入年龄" ref={c => this.inputAge = c}/>
        <button onClick={this.add}>add</button>
        <ul>
          {
            people.map(person => {
              return (
                <li key={person.id}>{person.name} -- {person.age}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
}

export default connect(
  state => ({people: state.people}),
  {
    addOnePerson: addPerson
  }
)(Person)
